import React from 'react';
import { history } from 'umi'
import classnames from 'classnames';
import styles from './style.less';

const Statistic = ({ title, data }) => {
    const handleClick = ({ link }) => () => {
        if (link) {
            history.push(link);
        }
    };
    return (
        <div className={styles.wrap}>
            <div className={styles.title}>{title}</div>
            <div className={styles.content}>
                {data.map(item => (
                    <div className={styles.box} key={item.label}>
                        <div
                            className={classnames(styles.value, { [styles.link]: item.link && item.value })}
                            onClick={handleClick(item)}
                        >
                            <span style={{ color: item.color }}>{item.value || '--'}</span>
                            <span className={styles.unit}>{item.unit}</span>
                        </div>
                        <div className={styles.label}>{item.label}</div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default Statistic;
